import BackgroundImg from "@assets/bg01.jpg";
import Fireworks1 from "@assets/fireworks_1.png";
import Fireworks2 from "@assets/fireworks_2.png";
import Dragon from "@assets/loading-3.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import LoadingProcess from "@plugin/LoadingProgress";
import React, { Component } from "react";
import styles from "./index.module.scss";

import { checkCode } from "@api";
import { Dialog } from "react-vant";
import {
  PreLoadImages,
  getChannel,
  getCode,
  isFirstLoad,
} from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";
import { ACTIVITY_2_ASSETS } from "../../../utils/preloadAssets";

const LanternBackground = (props) => {
  return (
    <div className={styles.species_background}>
      <img src={Fireworks1} className={styles.fireworks1} alt="" />
      <img src={Fireworks2} className={styles.fireworks2} alt="" />
      <img src={Fireworks2} className={styles.fireworks3} alt="" />
      {props.children}
    </div>
  );
};
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showFlag: false,
    };

    this.loadingRef = React.createRef();
  }

  async componentDidMount() {
    await PreLoadImages(ACTIVITY_2_ASSETS);
    this.loadingRef && this.loadingRef.end();

    window._ha("send", "action", "cny_activity2_loadingpage_view", {
      campaign_id: CampaignIds.activity2,
      channel: getChannel(),
      code: getCode(),
      first_load: isFirstLoad("activity_2"),
    });

    //确保需要携带code
    if (!sessionStorage.getItem("code")) {
      Dialog.alert({
        title: "未携带Code",
        message: `当前地址：${window.location.href}`,
      });
    }
  }

  checkCodeStatus = async () => {
    // 进入页面校验code 是否有效，以及状态
    const { state, data } = await checkCode();
    if (state === "ok") {
      if (data.status === 0) {
        this.props.navigate(`/activity_home_2`, {
          replace: true,
        });
      } else {
        this.props.navigate(`/activity_write_off_2?owner=${data.status}`, {
          replace: true,
        });
      }
    }
  };

  handlerLoaded = () => {
    const search = new URLSearchParams(window.location.search);

    //如果小程序中携带以下参数， 则是从奖品中心进入的， 直接跳转到奖品详情
    if (search.get("back") && search.get("prize")) {
      this.props.navigate(
        `/activity_result_2?reward_id=${search.get("prize")}`,
        {
          replace: true,
        }
      );
      return;
    }

    this.checkCodeStatus();
  };

  render() {
    const { showFlag } = this.state;
    return (
      <>
        <BaseBackground backgroundImage={BackgroundImg} showFlag={showFlag}>
          <LanternBackground>
            <div className={styles.header_box}>
              <LoadingProcess
                loaded={this.handlerLoaded}
                showProcessType="text"
                ref={(ref) => (this.loadingRef = ref)}
              />
            </div>

            <img src={Dragon} className={styles.dragon} alt="" />

            <div className={styles.cloud_bg}></div>
          </LanternBackground>
        </BaseBackground>
      </>
    );
  }
}

export default EnhanceUseNavigate(Index);
